/*
* @Author: zhangsai
* @Date: 2018/4/11
* @description: 4个行业 和行业标签组件
*/
<template>
    <div>
        <el-form :rules="rules" ref="industryForm" :model="form">
            <el-form-item label="CV行业分类" label-width="90px">
                <el-cascader
                @change="addTags(cvIndustryList,cvIndustryValue, 'nochange', 1)"
                style="width:100%"
                v-model="cvIndustryValue"
                :options="cvIndustryListCascader"
                :filterable="true"
                :clearable="true" />
            </el-form-item>
            <el-form-item label="国标分类" label-width="90px">
                <el-cascader
                @change="addTags(csIndustryList,csIndustryValue,'change', 2)"
                style="width:100%"
                v-model="csIndustryValue"
                :options="csIndustryListCascader"
                :filterable="true"
                :clearable="true" />
            </el-form-item>
            <el-form-item label="证监会分类" label-width="90px">
                <el-cascader
                style="width:100%"
                v-model="sfcIndustryValue"
                :options="sfcIndustryListCascader"
                :filterable="true"
                :clearable="true" />
            </el-form-item>
            <el-form-item label="申银万国" label-width="90px">
                <el-cascader
                style="width:100%"
                v-model="snIndustryValue"
                :options="snIndustryListCascader"
                :filterable="true"
                :clearable="true" />
            </el-form-item>
            <el-form-item label="投资行业" prop="industryTag" label-width="90px">
                <el-row class="ca-box minheight tagBox">
                    <select v-model="form.industryList" style="display:none" ></select>
                    <el-tag
                        class="m-r-5"
                        v-for="(tag, index) in industryList"
                        :key="index"
                        closable
                        :type="handleType(tag)"
                        @close="handleClose(index)">
                        <span @click="setStatus(tag, index)">
                            {{tag.threeLevelName || tag.twoLevelName}}
                            <span v-if="tag.dataCount">{{tag.dataCount}}</span>
                        </span>
                    </el-tag>
                </el-row>
            </el-form-item>   
        </el-form>
        <!--是否在cvs显示弹框-->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <span>{{dialogTip}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitSetShowStatus">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import { getCascaderData, setFullValue, getIndustryById, getListByChildren } from '../../libs/utils';
import { ComIndustryDto } from '../../api/Interface';
interface Industry {
  children: Industry[];
  code: string;
  level: number;
  name: string;
  parentCode: string;
}

@Component
export default class IndustryTag extends Vue {
    @Prop({ default: [] })
    public industryList: ComIndustryDto[];  // 行业
    // 初始化数据 相当于data
    public form = { industryTag: this.industryList };
    // cv行业
    public cvIndustryList = this.$store.state.user.dictionary.cvIndustryList;
    public cvIndustryListCascader = getCascaderData( {data: this.cvIndustryList} );
    public cvIndustryValue: string[] = [];
    public cvIndustryOneList = getListByChildren(this.cvIndustryList);
    // 国标
    public csIndustryList = this.$store.state.user.dictionary.csIndustryList;
    public csIndustryListCascader = getCascaderData( {data: this.csIndustryList} );
    public csIndustryValue: string[] = [];
    // 证监会
    public sfcIndustryList = this.$store.state.user.dictionary.sfcIndustryList;
    public sfcIndustryListCascader = getCascaderData( {data: this.sfcIndustryList} );
    public sfcIndustryValue: string[] = [];
    // 申银万国
    public snIndustryList = this.$store.state.user.dictionary.snIndustryList;
    public snIndustryListCascader = getCascaderData( {data: this.snIndustryList} );
    public snIndustryValue: string[] = [];

    // 弹框相关 
    public dialogVisible: boolean = false;
    public dialogTip: string = '请确定展示';
    public activeIndustryNumber: number = 0;
    // 弹框相关 end
    public rules = {
        industryTag: [
            { required: true, validator: this.validateIndustryTag, message: '请选择投资行业', trigger: 'change' }
        ]
    };
    // refs
    public $refs: {
        industryForm: HTMLFormElement
    };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }
    @Watch('industryList')
    public onChangeIndustryList() {
        if (this.industryList.length > 0) {
            this.$emit('industryPass', true);
        } else {
            this.$emit('industryPass', false);
        }
    }

    // 声明周期钩子
    public mounted() {
        // this.getOrgInfo();
    }

    // 方法
    // 根据国标分类 带出 证监会和申银万国的数据
    public csIndustryChange(value: string[]) {
        const lastVal = value[value.length - 1];
        // 带出证监会行业
        const sfcCode = getIndustryById(lastVal, setFullValue(this.csIndustryList), 'sfcCode');
        const sfcFullValue = getIndustryById(sfcCode, setFullValue(this.sfcIndustryList), 'fullValue');
        this.sfcIndustryValue = sfcFullValue ? sfcFullValue.split('-') : [];
        // 带出证监会行业 end
        // 带出申银万国行业
        const snCode = getIndustryById(lastVal, setFullValue(this.csIndustryList), 'snCode');
        const snFullValue = getIndustryById(snCode, setFullValue(this.snIndustryList), 'fullValue');
        this.snIndustryValue = snFullValue ? snFullValue.split('-') : [];
        // 带出申银万国行业 end
    }
    // 添加关注行业
    public addTags(mapObj: object[], mapArr: string[], change: string, typeNumber: number) {
        if (change === 'change') {
            this.csIndustryChange(this.csIndustryValue);
        }
        if (typeNumber === 1) {
            this.$emit('setCvIndustryChange', this.cvIndustryValue);
        }

        mapObj.map( (item: Industry) => {
            if (item.code === mapArr[0]) {
                if (item.children.length > 0) {
                    if (item.children) {
                        item.children.map( (childItem: Industry) => {
                            if (childItem.code === mapArr[1] ) {
                                if (childItem.children.length === 0) {
                                    const findIndex = this.industryList.findIndex(x => x.twoLevel === mapArr[1]);
                                    if (findIndex === -1) {
                                        this.industryList.push(this.industryChange(mapObj, mapArr, typeNumber));
                                    }
                                } else if (childItem.children.length > 0) {
                                    childItem.children.map( (grandSonItem: Industry) => {
                                        if (grandSonItem.code === mapArr[2]) {
                                            if (grandSonItem.children.length === 0) {
                                                const findIndex = this.industryList.findIndex(x => x.threeLevel === mapArr[2]);
                                                if (findIndex === -1) {
                                                    this.industryList.push(this.industryChange(mapObj, mapArr, typeNumber));
                                                }
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            }
        });
        this.$refs.industryForm.validate();
    }
    // 行业转化
    public industryChange(mapObj: object[], mapArr: string[], type: number) {
        const comIndustry = {} as ComIndustryDto;
        mapObj.map( (item: Industry) => {
            if (item.code === mapArr[0]) {
                comIndustry.operateType = 1;
                comIndustry.industryType = type;
                comIndustry.oneLevel = item.code;
                comIndustry.oneLevelName = item.name;
                if (item.children.length > 0) {
                    if (item.children) {
                        item.children.map( (childItem: Industry) => {
                            if (childItem.code === mapArr[1] ) {
                                comIndustry.twoLevel = childItem.code;
                                comIndustry.twoLevelName = childItem.name;
                                if (childItem.children.length === 0) {
                                    // if (this.tagsList.indexOf(childItem.name) < 0) {
                                    //     this.tagsList.push(childItem.name);
                                    // }
                                } else if (childItem.children.length > 0) {
                                    childItem.children.map( (grandSonItem: Industry) => {
                                        if (grandSonItem.code === mapArr[2]) {
                                            comIndustry.threeLevel = grandSonItem.code;
                                            comIndustry.threeLevelName = grandSonItem.name;
                                            if (grandSonItem.children.length === 0) {
                                                // if (this.tagsList.indexOf(grandSonItem.name) < 0) {
                                                //     this.tagsList.push(grandSonItem.name);
                                                // }
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            }
        });
        return comIndustry;
    }
    // 计算行业颜色
    public handleType(industry: ComIndustryDto) {
        let type = industry.operateType === 1 ? '' : 'info';
        // 是否cvs显示1是2否
        type = industry.showStatus === 1 ? 'success' : type;
        return type;
    }
    // 弹框 设置是否在cvs显示
    public setStatus(industry: ComIndustryDto, index: number) {
        const status = industry.showStatus;
        if (status === 1) {
            this.dialogTip = '请确定不展示' + (industry.threeLevelName || industry.twoLevelName ) + (industry.dataCount ? industry.dataCount : '') + '?';
        } else {
            this.dialogTip = '请确定展示' + (industry.threeLevelName || industry.twoLevelName ) + (industry.dataCount ? industry.dataCount : '') + '?';
        }
        this.activeIndustryNumber = index;
        this.dialogVisible = true;
    }
    // 设置是否在cvs显示
    public submitSetShowStatus() {
        const industry: ComIndustryDto = this.industryList[this.activeIndustryNumber];
        industry.showStatus = industry.showStatus === 1 ? 2 : 1;
        this.dialogVisible = false;
    }
    // 删除关注行业
    public handleClose(index: number) {
        this.industryList.splice(index, 1);
    }
    // 验证
    public validateIndustryTag(rule: object, value: string[], callback: (obj ?: object) => void) {
        if (this.industryList && this.industryList.length > 0) {
            callback();
        } else {
            callback(new Error('请选择投资行业'));
        }
    }
    // 验证是否必填
    public checkInput() {
        return new Promise((resolve, reject) => {
            if (this.industryList.length > 0) {
                resolve(true);
            } else {
                this.$refs.industryForm.validate((valid) => {
                    resolve(valid);
                }, (err) => {
                    reject(false);
                });
            }
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ca-title {
    height: 36px;
    overflow: hidden;
}
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 20px;
    margin-top: 12px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
.minheight{
  height: 150px;
  overflow-y: auto;
  padding: 0 10px;
  border-radius: 5px;
}
.ca-box {
    background: #fff;
    border: #dbe3ea 1px solid;
}
</style>